<!DOCTYPE html> 
<html> 
	<head> 
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta id="viewport" name="viewport"
		content="width=auto; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
	<title>jqmdp demo page</title> 

	<link rel="stylesheet" href="../../docs.css" />
	<link rel="stylesheet" href="../../../js/jqm11/jquery.mobile-1.1.0.min.css" />
	<script src="../../../js/jquery-1.7.1.js"></script>

	<script src="../../../js/jquery.mobile.jqmdp-1.0rc2.js"></script>
	<script src="../../../js/jqm11/jquery.mobile-1.1.0.js"></script>

</head>

<body >
<!-- ======================================================================== -->
	<div data-role="page" id="index" >
		<div data-role="header" data-position="fixed" data-theme="e" >
			<h1>Replace attributes</h1>
			<a href="../../index.html" data-icon="back" data-ajax="false"
				data-direction="reverse" data-iconpos="notext"></a>
			<a href="../../index.html" data-icon="home"  data-ajax="false"
				data-transition="none" data-iconpos="notext"></a>
		</div>
		<div data-role="content" >
			<div class="left-nav">
				<div data-dp-template="../../title.html" ></div>
				<hr/>
				<div data-dp-template="navi.html"></div>
			</div>

			<div class="right-nav" >
<h2>テンプレート属性</h2>
<p>
テンプレートにかかわるカスタム属性である。
</p>
<div data-dp-template="#linkList"></div>
			</div>
		</div>
		<div data-role="footer" data-position="fixed" data-dp-template="../../footer.html"></div>
	</div>
	
	<div data-role="template" id="linkList"   >
		<ul data-role="listview" data-inset="true" >
			<li><a href="#data-dp-template">data-dp-template属性</a></li>
		</ul>
	</div>

	
<!-- ======================================================================== -->

	<div data-role="page" id="data-dp-template"  data-dp-scope="({})">
		<div data-role="header" data-position="fixed" data-theme="e" >
			<h1>Replace attributes</h1>
			<a href="#index" data-icon="back" 
				data-direction="reverse" data-iconpos="notext"></a>
			<a href="../../index.html" data-icon="home"  data-ajax="false"
				data-transition="none" data-iconpos="notext"></a>
		</div>
		<div data-role="content" >
			<div class="left-nav">
				<div data-dp-template="../../title.html" ></div>
				<hr/>
<div data-dp-template="#linkList"></div>
			</div>

			<div class="right-nav" >
<h2>data-dp-template 属性</h2>
<p>
この属性を設定された要素の子要素が属性値の URL で示された要素の子要素に置き換わる。
<br />URL が「#」で始まらない場合、外部HTMLファイルとして読み込みソースとする。
<br />URL が「#」で始まる場合、その値を id とする現在のドキュメント内の要素をソースとする。
</p>
<p>
ドキュメント内の要素をソースとする場合、幾つかの制限がある。
<ul>
	<li>&lt;div data-role=page>タグの外側に無ければならない。</li>
	<li>&lt;a data-ajax=true>タグから読み込んだHTML無いの要素はソースと出来ない。
		data-ajax=true はデフォルトなので注意。</li>
</ul>

</p>

<p>
この属性が処理されるのは pagebeforecreate イベントのタイミングのみである。 
</p>


<p>
記述例：
<pre>&lt;div <b>data-dp-template="../../footer.html"</b>>&lt;/div>
&lt;div <b>data-dp-template="#innerTemplate"</b>>&lt;/div>
</pre>

外部テンプレート定義：(外部ファイル footer.html に)
<pre>
&lt;div data-role="none">
(c)2011 kotemaru.org
&lt;/div>
</pre>

内部テンプレート定義：(&lt;body>直下に)
<pre>
&lt;div data-role="none" id="innerTemplate" >
	&lt;b>Innter template sample&lt;/b>
&lt;/div>
</pre>

実行結果：
<blockquote data-dp-id="example">
	<div data-dp-template="../../footer.html"></div>
	<div data-dp-template="#innerTemplate"></div>
</blockquote>
<p/>
			</div>
		</div>
		<div data-role="footer" data-position="fixed" data-dp-template="../../footer.html"></div>
	</div>
	
<!-- ======================================================================== -->

	<div data-role="none" id="innerTemplate" >
		<b>Innter template sample. </b>
	</div>
	
</body>

</html>
